<template>
	<page-meta>
		<navigation-bar :title="$tt('share.userDetail')" title-align="center" background-color="#F1F3F9"
			front-color="#000000" />
	</page-meta>
	<view class="device-share-detail-wrap">
		<view class="user-info-wrap">
			<view class="title-wrap">
				<u--text size="15" prefixIcon="account-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					:text="$tt('share.userMsg')"></u--text>
			</view>
			<view class="container-wrap">
				<view class="item">
					<u--text :text="$tt('share.userId')+form.userId" lineHeight="30" size="14"></u--text>
				</view>
				<view class="item">
					<u--text :text="$tt('share.userName')+form.userName" lineHeight="30" size="14"></u--text>
				</view>
				<view class="item">
					<u--text :text="$tt('share.phoneNumber')+form.phonenumber" lineHeight="30" size="14"></u--text>
				</view>
			</view>
		</view>
		<view class="permission-wrap">
			<view class="title-wrap">
				<u--text size="15" prefixIcon="integral-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					:text="$tt('share.userPermissions')"></u--text>
			</view>
			<view class="container-wrap">
				<u-checkbox-group placement="column" @change="checkboxChange">
					<view class="checkbox-item-wrap" v-for="(item, index) in permissionList">
						<view>
							<u--text :text="`${item.modelName} (${item.identifier})`" size="14" color="#000"></u--text>
							<u--text type="info" :text="item.remark ? item.remark: $tt('share.notRemark')"
								size="14"></u--text>
						</view>

						<u-checkbox :customStyle="{marginBottom: '26rpx'}" :key="index" :name="item.modelName"
							:checked="item.checked">
						</u-checkbox>
					</view>
				</u-checkbox-group>
			</view>
		</view>

		<view class="remark-wrap">
			<view class="title-wrap">
				<u--text size="15" prefixIcon="file-text-fill" iconStyle="font-size: 40rpx; margin-right: 10rpx;"
					:text="$tt('share.remark')"></u--text>
			</view>
			<view class="container-wrap">
				<u--textarea v-model="form.remark" :placeholder="$tt('deviceDetail.inputMsg')" border="none"
					confirmType="done"></u--textarea>
			</view>
		</view>

		<view class="btn-wrap">
			<u-button v-if="type === 1" type="primary" :plain="true" @tap="handleAddUser"
				customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-bottom: 20rpx">{{$tt('share.confirmShare')}}</u-button>
			<u-button v-if="type === 2" type="error" :plain="true" @tap="handleDeleteUser"
				customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-bottom: 20rpx">{{$tt('common.delete')}}</u-button>
			<u-button v-if="type === 2" type="primary" :plain="true" @tap="handleEditUser"
				customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-bottom: 20rpx">{{$tt('common.save')}}</u-button>
		</view>
		<!-- <view class="footer">
			<u-button type="primary" :plain="true" @tap="handleSubmitForm"
				customStyle="border: none; border-radius: 5px; padding: 50rpx 0;">{{$tt('common.save')}}</u-button>
			<u-button v-if="isUpdate" type="error" :plain="true" @tap="handleDelete()"
				customStyle="border: none; border-radius: 5px; padding: 50rpx 0; margin-top: 10px;">{{$tt('common.delete')}}</u-button>
		</view> -->
	</view>
</template>
<script>
	import {
		addDeviceUser,
		updateDeviceUser,
		delDeviceUser
	} from '@/apis/modules/deviceUser';
	import {
		getModelPermList
	} from "@/apis/modules/model";

	export default {
		data() {
			return {
				type: 1, // 类型: 1=新增，2=更新
				permissionList: [], // 权限列表
				selectPerms: [], // 选中的权限列表
				// 表单参数
				form: {
					deviceId: null,
					userId: null,
					deviceName: null,
					userName: null,
					perms: null,
					phonenumber: null,
					remark: null
				}
			};
		},
		onLoad(option) {
			this.form.phonenumber = option.phonenumber;
			this.form.remark = option.remark;
			this.form.userId = option.userId;
			this.form.userName = option.userName;
			this.form.deviceId = option.deviceId;
			this.form.deviceName = option.deviceName;
			this.form.productId = option.productId;
			this.form.perms = option.perms;
			this.type = Number(option.type);
			this.getPermissionList();
		},
		methods: {
			// 查询产品物模型设备权限列表 
			async getPermissionList() {
				if (this.form.perms) {
					this.selectPerms = this.form.perms.split(',');
				}
				getModelPermList(this.form.productId, this.form.deviceId, this.profile.userId).then((response) => {
					// 固定增加设备系统相关权限
					this.permissionList = response.data;
					if (this.selectPerms.length > 0) {
						for (let i = 0; i < this.permissionList.length; i++) {
							for (let j = 0; j < this.selectPerms.length; j++) {
								if (this.permissionList[i].identifier == this.selectPerms[j]) {
									this.permissionList[i].checked = true;
								}
							}
						}
					}
				});
			},
			// 复选框改变事件
			checkboxChange(data) {
				this.selectPerms = [];
				for (let i = 0; i < this.permissionList.length; i++) {
					if (data.indexOf(this.permissionList[i].modelName) != -1) {
						this.selectPerms.push(this.permissionList[i].identifier)
					}
				}
			},
			// 添加设备用户
			handleAddUser() {
				this.form.perms = this.selectPerms.join(',');
				addDeviceUser(this.form).then(response => {
					uni.showToast({
						icon: 'success',
						title: this.$tt('share.deviceShareSuccess')
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (e) => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 2];
								if (page === undefined || page === null)
									return;
								// 更新列表
								if (uni.getSystemInfoSync().platform ===
									'devtools') {
									page.$vm.dataList = [];
									page.$vm.getList();
								} else {
									page.dataList = [];
									page.getList();
								}
							}
						});
					}, 1000);
				});
			},
			// 编辑
			handleEditUser() {
				this.form.perms = this.selectPerms.join(',');
				updateDeviceUser(this.form).then(response => {
					uni.showToast({
						icon: 'success',
						title: this.$tt('common.updateSuccessful')
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1,
							success: (e) => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 1];
								if (page === undefined || page === null)
									return;
								// 更新列表
								if (uni.getSystemInfoSync().platform ===
									'devtools') {
									page.$vm.dataList = [];
									page.$vm.getList();
								} else {
									page.dataList = [];
									page.getList();
								}
							}
						});
					}, 1000);
				});
			},
			// 删除
			handleDeleteUser() {
				uni.showModal({
					title: this.$tt('share.title'),
					content: this.$tt('share.alert'),
					cancelText: this.$tt('common.cancel'),
					confirmText: this.$tt('common.confirm'),
					success: result => {
						if (result.confirm) {
							uni.showLoading({
								title: this.$tt('share.delete')
							});
							delDeviceUser(this.form).then(res => {
								if (res) {
									uni.showToast({
										icon: 'success',
										title: res.msg
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success: (e) => {
												var pages =
													getCurrentPages();
												var page = pages[pages
													.length - 1];
												if (page ===
													undefined ||
													page ===
													null)
													return;
												// 更新列表
												if (uni
													.getSystemInfoSync()
													.platform ===
													'devtools') {
													page.$vm
														.dataList = [];
													page.$vm.getList();
												} else {
													page.dataList = [];
													page.getList();
												}
											}
										});
									}, 1000);
								}
							}).finally(() => {
								uni.hideLoading();
							});
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.device-share-detail-wrap {

		padding: 40rpx 0;

		.user-info-wrap,
		.permission-wrap,
		.remark-wrap {
			background: #ffffff;
			margin: 0 30rpx;
			border-radius: 15rpx;

			.title-wrap {
				padding-top: 35rpx;
				padding-bottom: 35rpx;
				margin: 0 20rpx;
				border-bottom: 1rpx solid #e0e2e7;
			}

			.container-wrap {
				//margin-top: 10rpx;
				padding: 15rpx 35rpx;

				.item {
					padding: 20rpx 0;
					//border-bottom: 4px solid #f1f3f9;
				}

				.checkbox-item-wrap {
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					//border-bottom: 4px solid #f1f3f9;
				}
			}
		}

		.permission-wrap,
		.remark-wrap {
			margin-top: 40rpx;
		}

		.remark-wrap {
			padding-bottom: 20rpx;
		}

		.btn-wrap {
			margin-top: 40rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			//display: flex;
			//margin: 80rpx 0;
		}
	}
</style>